<template>
  <div>
    <navigator activeId="1"></navigator>
    <el-row class="x-container">
      <el-col :md="24">
        <div class="card-wrap">
          <el-card shadow="never">
            <div slot="header" class="x-card-header">
              <div>
                <el-input placeholder="搜索问题">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </div>
              <button class="x-btn">提问?</button>
            </div>
            <div class="post-list">
              <div
                v-for="(item, index) in list"
                :key="index"
                class="question-item post-item"
              >
                <div class="answers">
                  <div class="number">0</div>
                  <div class="text">回答数</div>
                </div>
                <div class="info">
                  <a href="/question/detail"
                    ><h3 class="title">{{ item.title }}</h3>
                    <p class="abstract">{{ item.content }}</p></a
                  >
                  <div class="tips">
                    <div class="tags">
                      <span v-for="(tag, index) in item.tags" :key="index">
                        {{ tag.name }}
                      </span>
                    </div>
                    <div class="user">
                      <a href=""
                        ><img :src="item.avatar" alt="" class="profile-sm"
                      /></a>
                      <div>
                        <a href="">{{ item.username }}</a>
                        <p>
                          <!-- <span>回答({{ item.answers }})</span> -->
                          <span>浏览({{ item.views }})</span>
                          <span>&nbsp;{{ item.createTime }}</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <el-pagination
              class="page-box"
              background
              layout="prev, pager, next"
              :hide-on-single-page="true"
              :total="total"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </el-card>
        </div>
      </el-col>
      <el-col :md="6"></el-col>
    </el-row>
  </div>
</template>

<script>
import Navigator from "@/components/Navigator.vue";

export default {
  components: {
    Navigator,
  },
  data() {
    return {
      list: [
        {
          title: "请求api404怎么回事",
          content:
            "在Controllers文件夹下添加一个包含读写api，然后运行项目输入api地址报404错误 这是WebApiConfig.cs没有动过在Controllers文件夹下添加一个包含读写api，然后运行项目输入api地址报404错误 这是WebApiConfig.cs没有动过在Controllers文件夹下添加一个包含读写api，然后运行项目输入api地址报404错误 这是WebApiConfig.cs没有动过",
          tags: [],
          avatar: "http://img.xsirl.cn/default.jpg",
          username: "蜉蝣渡海",
          answers: 0,
          views: 0,
          createTime: "29分钟前",
        },
      ],
      total: 15,
    };
  },
  methods: {
    handleCurrentChange() {},
  },
  created() {
    const tmp = this.list[0];
    for (let i = 0; i < 10; ++i) {
      this.list.push(tmp);
    }
  },
};
</script>

<style scoped>
.x-container {
  padding: 0 2%;
}
.x-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.question-item {
  display: flex;
  padding: 10px;
}
.question-item + .question-item {
  border-top: 1px solid #f0f0f0;
}
.question-item .answers {
  background-color: #f0f0f0;
  /* border: 1px solid #eee; */
  border-radius: 2px;
  height: fit-content;
  width: fit-content;
}
.question-item .answers .number {
  background-color: #5fb878;
  color: #fff;
  font-weight: 600;
  text-align: center;
  width: 42px;
  height: 24px;
  line-height: 24px;
  font-size: 16px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.question-item .answers .text {
  font-size: 12px;
  text-align: center;
  height: 24px;
  line-height: 24px;
  color: #999;
}
.question-item .info {
  flex-grow: 1;
  margin-left: 15px;
}
.question-item .info .tips {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.question-item .info .tips .tags {
  margin: 10px 0;
}
.question-item .info .tips .tags span {
  padding: 2px 5px;
  background-color: #f0f0f0;
  color: #5fb878;
  border-radius: 2px;
}
.question-item .info .tips .tags span + span {
  margin-left: 5px;
}
.question-item .info .tips .user {
  display: flex;
}
.question-item .info .tips .user p {
  font-size: 12px;
  color: #999;
}
</style>
